<template>
  <div class="prescripDataTable">
    <div class="prescripDataTable_item">
      <div class="prescripDataTable_item_number">
        序号:{{ formdata?.id ?? 0 }}
      </div>
      <van-row justify="space-around" class="prescripDataTable_item_row">
        <van-col span="9">
          <div class="prescripDataTable_item_box">
            <selectBox
              v-model="formdata[`machineName`]"
              :list="list"
              @selectClicked="selectClicked"
              @selectClickedCancel="selectClickedCancel"
              :count="count"
              :name="'machine'"
              @toRefreshmachineList="toRefreshmachineList"
              ref="selectBoxRef"
            ></selectBox>
            <!-- <van-field
              type="text"
              required
              v-model="formdata[`machineName`]"
              placeholder="药名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            /> -->
          </div>
        </van-col>
        <van-col span="9">
          <div class="prescripDataTable_item_box">
            <van-field
              v-model="formdata[`counts`]"
              placeholder="数量"
              type="number"
            />
          </div>
        </van-col>
      </van-row>
      <van-row justify="space-around" class="prescripDataTable_item_row">
        <van-col span="9">
          <div class="prescripDataTable_item_box">
            <selectBox
              v-model="formdata[`time`]"
              :isRresh="false"
              :list="timeList"
              @selectClicked="selectClicked"
              @selectClickedCancel="selectClickedCancel"
              :count="count"
              :name="'time'"
            ></selectBox>
            <!-- <van-field v-model="formdata[`time`]" placeholder="时间段" /> -->
          </div>
        </van-col>
        <van-col span="9">
          <div class="prescripDataTable_item_box">
            <van-field
              v-model="formdata[`aroundDinnerData`]"
              type="text"
              placeholder="饭前后"
            />
          </div>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="24">
          <div class="prescripDataTable_item_content">
            <div class="prescripDataTable_item_content_tips">
              <van-field
                v-model="formdata[`mattersData`]"
                rows="2"
                autosize
                type="textarea"
                maxlength="150"
                placeholder="注意事项"
                show-word-limit
                clickable
              />
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import drugService from "@/service/drugService.js";
import selectBox from "@/base-ui/select";
import { watch, ref, reactive, toRefs, onMounted } from "vue";
export default {
  name: "prescripDataTable",
  components: { selectBox },
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  setup(props, { emit }) {
    const selectBoxRef = ref(null);
    const index = ref(1);
    const formdata = ref(props.item);
    const pageInfo = reactive({
      pageIndex: index.value,
      pageSize: 10,
    });
    const data = reactive({
      list: [],
      timeList: [
        {
          drugName: "08:00",
        },
        {
          drugName: "12:00",
        },
        {
          drugName: "16:00",
        },
        {
          drugName: "20:00",
        },
      ],
      count: "", //判断同一个表格中的两个select组件能否两个一起展开
    });
    watch(
      formdata,
      (newVal) => {
        emit("update:modelValue", newVal);
      },
      { deep: true }
    );
    const selectClicked = (item) => {
      data.count = item;
    };
    const selectClickedCancel = (item) => {
      data.count = item;
    };
    const toRefreshmachineList = async () => {
      try {
        index.value += 1;
        const result = await drugService.request({
          url: "/drug/drugPage",
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          data: JSON.stringify({
            pageIndex: index.value,
            pageSize: 10,
          }),
        });
        if (result.data.msg) {
          Toast.fail(result.data.msg);
          return;
        }
        if (result.data.data.rows == 0) {
          selectBoxRef.value.handleFinishRefresh();
          return;
        }
        const arr2 = [
          {
            drugID: "100585",
            drugName: "药物测试03",
          },
          {
            drugID: "10085",
            drugName: "药物测试03",
          },
          {
            drugID: "10051414",
            drugName: "药物测试03",
          },
          {
            drugID: "100585789",
            drugName: "药物测试03",
          },
          {
            drugID: "10100585001",
            drugName: "药物测试03",
          },
        ];
        data.list = data.list.concat(arr2);
        selectBoxRef.value.handleStopRefresh();
      } catch (error) {
        console.log(error);
      }
    };
    onMounted(async () => {
      try {
        const result = await drugService.request({
          url: "/drug/drugPage",
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          data: JSON.stringify(pageInfo),
        });
        if (result.data.msg) {
          Toast.fail(result.data.msg);
          return;
        }
        // if (result.data?.rows == 0) {
        // }
        data.list = result.data.data.rows;
      } catch (error) {
        console.log(error);
      }
    });
    return {
      formdata,
      ...toRefs(data),
      selectClicked,
      selectClickedCancel,
      toRefreshmachineList,
      selectBoxRef,
    };
  },
};
</script>

<style lang="scss" scope>
.prescripDataTable {
  padding: 10px 20px;

  &_item {
    border: 1px solid #ccc;
    width: 100%;
    min-height: 220px;
    padding: 15px 5px 10px 5px;
    &_number {
      font-size: 18px;
    }
    &_row {
      margin: 10px 0;
    }
    &_content {
      font-size: 16px;
      margin-top: 15px;
      padding: 0 15px;
      &_tips {
        border: 1px solid #ccc;
      }
    }
    &_box {
      height: 100%;

      border: 1px solid #ccc;
    }
  }
}
</style>
